//定义折线柱状图例
var buidEcharts = {
	initBarOrLine:function(domId,series,legend,xAxis,yAxis,title) {
		var charts = echarts.init(domId);
		var option = {
			tooltip: {
			  trigger: 'axis',
			  axisPointer: {
				type: 'cross',
				crossStyle: {
				  color: '#999'
				}
			  }
			},
			xAxis:xAxis,
			yAxis:yAxis,
			series:series
		}
		
		if(title != undefined && title!= null) {
			option.title = title;
		}
		
		if(legend != undefined && legend!= null) {
			option.legend = legend;
		}
		
		charts.clear();
		charts.setOption(option);
		
		window.addEventListener('resize',function() {
		    charts.resize();
		});
	},
	init:function() {
		// buidEcharts.initBarOrLine(document.querySelector(".bar .chart"),
		// [
		//   {
		//     name: '运营线路条数',
		//     type: 'bar',
		//     barWidth:"35%",
		//     itemStyle:{
		//         normal:{
		//             barBorderRadius: 5,
		//             color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
		//             // color:"#2f89cf",
		//         },
		//     },
		//     data: [
		//       1118, 1175, 671, 551, 400, 677, 899, 131, 155, 467, 148
		//     ]
		//   },
		//   {
		//     name: '运营线路长度',
		//     type: 'line',
		//     lineStyle:{
		//         normal:{
		//             color:"#99cc00",
		//         },
		//     },
		//     yAxisIndex: 1,
		//     data: [2.0, 2.2, 1.4, 1.0,0.8,1.0, 1.6, 0.2, 0.3, 1.0, 0.2]
		//   }
		// ],
		// {
		//   data: ['运营线路条数', '运营线路长度'],
		//   textStyle: {
		//       color:"rgba(255,255,255,.6)"
		//   }
		// },
		// [
		//   {
		//     type: 'category',
		//     data: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
		//     axisPointer: {
		//       type: 'shadow'
		//     },
		//     axisLabel:{
		//         color:"rgba(255,255,255,.6)",
		//         fontSize: '12'
		//     },
		//     axisLine:{
		//         show: false
		//     }
		//   }
		// ],
		// [
		//    {
		//     type: 'value',
		//     name: '条',
		//     min: 0,
		//     max: 1400,
		//     interval: 200,
		//     axisLabel:{
		//         color:"rgba(255,255,255,.6)",
		//         fontSize: '12'
		//     },
		//     axisLine:{
		//         lineStyle:{
		//             color:"rgba(255,255,255,.1)",
		//         }
		//     },
		//     splitLine:{
		//         lineStyle:{
		//             color:"rgba(255,255,255,.1)",
		//         }
		//     }
		//   },
		//   {
		//     type: 'value',
		//     name: '万公里',
		//     min: 0,
		//     max: 2.5,
		//     interval: 0.5,
		//     axisLabel:{
		//         color:"rgba(255,255,255,.6)",
		//         fontSize: '8'
		//     },
		//     axisLine:{
		//         lineStyle:{
		//             color:"rgba(255,255,255,.1)",
		//         }
		//     },
		//     splitLine:{
		//         show:false,
		
		//     }
		//   }
		// ]);
	},
	//地图
	initMap:function(mapData,data,unit) {
		var MapChart = echarts.init(mapData);
		MapChart.clear();
		$.get('../json/zhejiang.json',function(geoMap) {
		  echarts.registerMap('zhejiang',geoMap);
		  var geoCoordMap = {
		    "杭州市": [120.153576, 30.287459],
		    "湖州市": [120.102398, 30.867198],
		    "嘉兴市": [120.750865, 30.762653],
		    "宁波市": [121.549792, 29.868388],
		    "舟山市": [122.106863, 30.016028],
		    "丽水市": [119.921786, 28.451993],
		    "金华市": [119.649506, 29.089524],
		    "台州市": [121.428599, 28.661378],
		    "绍兴市": [120.582112, 29.997117],
		    "温州市": [120.672111, 28.000575],
		    "衢州市": [118.87263, 28.941708]
		  };
		    var max = 480, min = 9; // todo 
		    var maxSize4Pin = 100, minSize4Pin = 20;
		
		console.log(data)
		  var convertData = function (data) {
		    var res = [];
		    for (var i = 0; i < data.length; i++) {
		        var geoCoord = geoCoordMap[data[i].name];
		        if (geoCoord) {
		            res.push({
		                name: data[i].name,
		                value: geoCoord.concat(data[i].value).concat(unit)
		            });
		        }
		    }
		    return res;
		};
		
		
		option = {
			geo: {
				show: true,
				type:'map',
				map: 'zhejiang',
				zoom:1.4,
				label: {
					normal: {
						show: false,
					},
					emphasis: {
						show: false,
					}
				},
				roam: true,
				itemStyle: {
					normal: {
						areaColor: '#142957',
						borderColor: '#0692a4',
					},
					emphasis: {
						areaColor: '#0b1c2d',
					}
				}
			},
			series : [
			{
				name: 'credit_pm2.5',
				type: 'scatter',
				coordinateSystem: 'geo',
				data: convertData(data),
				symbolSize:function(value) {
					return 1;
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: true
					},
				  emphasis: {
					  show: true
				  }
				},
				itemStyle: {
					normal: {
						color: '#D4EEFF'
					}
				}
			},
			//弹出tip
			{
				name: '点',
				type: 'scatter',
				coordinateSystem: 'geo',
				symbol: 'rect',
				symbolSize: function () {
					return 1;
				},
				label: {
					normal: {
						show: true,
						formatter: '{b}\n {@[3]}：{@[2]}',
						lineHeight: 20,
					   backgroundColor:'rgba(255,255,255,.9)',
					   borderColor:'#80cffd',
					   borderWidth:'1',
					   padding:[5,10,4],
					   color:'#000000',
					   fontSize: 14,
					   fontWeight:'normal',
					}
				},
				zlevel: 6,
				data: convertData(data),
			}
		]
		};
		
		MapChart.setOption(option);
			
		MapChart.on("click",function(params){//地图上点击事件,省级可以点击，市级不能
			if(params.name.indexOf("绍兴市") != -1) {
				//省级页面点击绍兴市
				window.open("../cityBus/sxCityBus.html","_self");
			}
		});
		window.addEventListener('resize',function() {
		  MapChart.resize();
		});
		});
	},
	initPie:function(domId,series,legend) {
		var MapChart = echarts.init(domId);
		MapChart.clear();
		var option = {
			tooltip: {
			  trigger: 'item',
			  formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: legend, 
			series: series
		  };
		MapChart.setOption(option);
	},
	initEvent:function(eventDomId,domId,series,legend,xAxis,yAxis) {
		$(eventDomId).click(function(){
			$(this).siblings().removeClass("aSelector");
			$(this).addClass("aSelector");
			var key = $(this).attr("key");
			
			buidEcharts.initBarOrLine(domId,
			series,
			legend,
			xAxis,
			yAxis);
			
			if(key != 1) {
				//初始化地图
				var names = xAxis[0].data;
				var seriesData = series[0].data;
				var unit = $(this).text();
				var mapDatas = [];
				$.each(names,function(i,name) {
					mapDatas.push({"name":name + "市","value":seriesData[i]});
				});
				buidEcharts.initMap(document.getElementById("mapData"),mapDatas,unit);
			}
			
		});
	},
	initLoadData:function(domId,data) {
		var trs = "";
		for(var i=0;i<data.length;i++) {
			trs += "<tr>";
			for(var n=0;n<data[i].length;n++) {
				trs += "<td>" + data[i][n] + "</td>";
			}
			trs += "</tr>";
		}
		console.log(trs)
		$(domId).html(trs);
	}
}



// 柱状图模块
$(function() {
	
	var xAxis = [
          {
            type: 'category',
            data: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '9'
            },
            axisLine:{
                show: false
            }
          }
        ];
	var yAxis = [
           {
            type: 'value',
            name: '条',
            min: 2000,
            max: 21800,
            interval: 2000,
            axisLabel:{
                color:"rgba(255,255,255,.6)",
                fontSize: '8'
            },
            axisLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            },
            splitLine:{
                lineStyle:{
                    color:"rgba(255,255,255,.1)",
                }
            }
          }
        ];
	var series = [
          {
            name: '运营里程',
            type: 'bar',
            barWidth:"35%",
            itemStyle:{
                normal:{
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
                    // color:"#2f89cf",
                },
            },

            data: [
              20241, 21756.9, 13871.1 ,9752.9 ,7820.0 ,9709.7 ,15596.4 ,2231.7 ,3057.5 ,9857.9 ,2440.3 
            ]
          }
        ];
		
	var legend = null;
	
	// buidEcharts.init();
	buidEcharts.initEvent($("#yylc"),
	document.querySelector(".bar .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	yAxis=[
	   {
	    type: 'value',
	    name: '辆',
	    min: 650,
	    max: 10200,
	    interval: 1500,
	    axisLabel:{
	        color:"rgba(255,255,255,.6)",
	        fontSize: '8'
	    },
	    axisLine:{
	        lineStyle:{
	            color:"rgba(255,255,255,.1)",
	        }
	    },
	    splitLine:{
	        lineStyle:{
	            color:"rgba(255,255,255,.1)",
	        }
	    }
	  }
	];
	series=[
	  {
	    name: '运营车辆',
	    type: 'bar',
	    barWidth:"35%",
	    itemStyle:{
	        normal:{
	            barBorderRadius: 5,
	            color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
	            // color:"#2f89cf",
	        },
	    }, 
	
	    data: [
	      10195 ,8932 ,5316, 2939, 1894, 3570, 4124, 685, 951, 3086, 978
	    ]
	  }
	];
	buidEcharts.initEvent($("#yycl"),
	document.querySelector(".bar .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	legend={
	  data: ['运营线路条数'],
	  textStyle: {
	      color:"rgba(255,255,255,.6)"
	  }
	};
	
	yAxis=[
	   {
	    type: 'value',
	    name: '条',
	    min: 6000,
	    max: 100700,
	    interval: 10000,
	    axisLabel:{
	        color:"rgba(255,255,255,.6)",
	        fontSize: '8'
	    },
	    axisLine:{
	        lineStyle:{
	            color:"rgba(255,255,255,.1)",
	        }
	    },
	    splitLine:{
	        lineStyle:{
	            color:"rgba(255,255,255,.1)",
	        }
	    }
	  }
	];
	series=[
	  {
	    name: '客运量',
	    type: 'bar',
	    barWidth:"35%",
	    itemStyle:{
	        normal:{
	            barBorderRadius: 5,
	            color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
	            // color:"#2f89cf",
	        },
	    },
	
	    data: [
	      100697.1, 57887.0, 27219.3, 18515.0, 13028.4, 29151.2, 31345.6, 6092.2 ,8209.0 ,18057.8 ,7695.1 
	    ]
	  }
	];
	buidEcharts.initEvent($("#kyl"),
	document.querySelector(".bar .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	
	legend={
	  data: ['运营线路条数'],
	  textStyle: {
	      color:"rgba(255,255,255,.6)"
	  }
	};
	yAxis=[
	   {
	    type: 'value',
	    name: '条',
	    min: 100,
	    max: 1200,
	    interval: 200,
	    axisLabel:{
	        color:"rgba(255,255,255,.6)",
	        fontSize: '8'
	    },
	    axisLine:{
	        lineStyle:{
	            color:"rgba(255,255,255,.1)",
	        }
	    },
	    splitLine:{
	        lineStyle:{
	            color:"rgba(255,255,255,.1)",
	        }
	    }
	  }
	];
	series=[
	  {
	    name: '运营线路条',
	    type: 'bar',
	    barWidth:"35%",
	    itemStyle:{
	        normal:{
	            barBorderRadius: 5,
	            color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
	            // color:"#2f89cf",
	        },
	    },
	    data: [
	      1118, 1175, 671, 551, 400, 677, 899, 131, 155, 467, 148
	    ]
	  }
	];
	buidEcharts.initEvent($("#yylx"),
	document.querySelector(".bar .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	//历史趋势
	legend={
		  data: ['客运量', '增速'],
		  textStyle: {
			color:"rgba(255,255,255,.6)"
		 }
		};
	xAxis=[
	  {
		type: 'category',
		data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
		axisPointer: {
		  type: 'shadow'
		},
		axisPointer: {
			type: 'shadow'
		  },
		  axisLabel:{
			  color:"rgba(255,255,255,.6)",
			  fontSize: '12'
		  },
		  axisLine:{
			  show: false
		  }
	  }
	];
	yAxis=[
	   {
		type: 'value',
		name: '亿人次',
		min: 32.5,
		max: 35.5,
		interval: 0.5,
		axisLabel:{
			color:"rgba(255,255,255,.6)",
			fontSize: '12'
		},
		axisLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		},
		splitLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		}
	  },
	  {
		type: 'value',
		name: '%',
		min: -4.0,
		max: 3.0,
		interval: 1.0,
		axisLabel:{
			color:"rgba(255,255,255,.6)",
			fontSize: '12'
		},
		axisLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		},
		splitLine:{
			show:false,

		}
	  }
	];
	series=[
	  {
		name: '客运量',
		type: 'bar',
		barWidth:"50%",
		itemStyle:{
			normal:{
				barBorderRadius: 5,
				color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
				// color:"#2f89cf",
			},
		},
		data: [
		  35, null, 33.79,33.45, 33.48
		]
	  },
	  {
		name: '增速',
		type: 'line',
		yAxisIndex: 1,
		lineStyle:{
			normal:{
				color:"#99cc00",
			},
		},
		data: [1.9, null, -0.3, -1.0,0.1]
	  }
	];
	
	buidEcharts.initEvent($("#keyunl"),
	document.querySelector(".line .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	legend = null;
	xAxis=[
	  {
		type: 'category',
		data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
		axisPointer: {
		  type: 'shadow'
		},
		axisPointer: {
			type: 'shadow'
		  },
		  axisLabel:{
			  color:"rgba(255,255,255,.6)",
			  fontSize: '12'
		  },
		  axisLine:{
			  show: false
		  }
	  }
	];
	yAxis=[
	   {
		type: 'value',
		name: '万公里',
		axisLabel:{
			color:"rgba(255,255,255,.6)",
			fontSize: '12'
		},
		axisLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		},
		splitLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		}
	  }
	];
	series=[
	  {
		name: '运营里程',
		type: 'bar',
		barWidth:"50%",
		itemStyle:{
			normal:{
				barBorderRadius: 5,
				color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
				// color:"#2f89cf",
			},
		},
		data: [
		  111322, null, 34233,123456, 122333
		]
	  }
	];
	
	buidEcharts.initEvent($("#yunyinglc"),
	document.querySelector(".line .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	legend = null;
	xAxis=[
	  {
		type: 'category',
		data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
		axisPointer: {
		  type: 'shadow'
		},
		axisPointer: {
			type: 'shadow'
		  },
		  axisLabel:{
			  color:"rgba(255,255,255,.6)",
			  fontSize: '12'
		  },
		  axisLine:{
			  show: false
		  }
	  }
	];
	yAxis=[
	   {
		type: 'value',
		name: '运营车辆',
		axisLabel:{
			color:"rgba(255,255,255,.6)",
			fontSize: '12'
		},
		axisLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		},
		splitLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		}
	  }
	];
	series=[
	  {
		name: '运营车辆',
		type: 'bar',
		barWidth:"50%",
		itemStyle:{
			normal:{
				barBorderRadius: 5,
				color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
				// color:"#2f89cf",
			},
		},
		data: [
		  34567, null, 43562,43273, 52345
		]
	  }
	];
	
	buidEcharts.initEvent($("#yunyingcl"),
	document.querySelector(".line .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	legend = null;
	xAxis=[
	  {
		type: 'category',
		data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
		axisPointer: {
		  type: 'shadow'
		},
		axisPointer: {
			type: 'shadow'
		  },
		  axisLabel:{
			  color:"rgba(255,255,255,.6)",
			  fontSize: '12'
		  },
		  axisLine:{
			  show: false
		  }
	  }
	];
	yAxis=[
	   {
		type: 'value',
		name: '运营线路',
		axisLabel:{
			color:"rgba(255,255,255,.6)",
			fontSize: '12'
		},
		axisLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		},
		splitLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		}
	  }
	];
	series=[
	  {
		name: '运营线路',
		type: 'bar',
		barWidth:"50%",
		itemStyle:{
			normal:{
				barBorderRadius: 5,
				color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
				// color:"#2f89cf",
			},
		},
		data: [
		  1234, null, 2345,3214, 4321
		]
	  }
	];
	
	buidEcharts.initEvent($("#yunyingxl"),
	document.querySelector(".line .chart"),
	series,
	legend,
	xAxis,
	yAxis
	);
	
	legend={
	  top: '4%',
	  left: 'center',
	  itemWidth:32,
	  itemHeight:24,
	  textStyle: {
		color:"rgba(255,255,255,.6)"
		}
	};
	series=[
	  {
		name: '实时运营车辆',
		color: ['#00aa00', '#ffaa7f', '#aaaa7f', '#aa557f', '#aaff7f', '#ff557f', '#32c5e9', '#aa007f'],
		type: 'pie',
		radius: [50, 120],
		center: ['50%', '60%'],
		roseType: 'area',
		itemStyle: {
			borderRadius: 8
		},
		label:{
			show:true,
			formatter:'{b}: {d} %'
			
		},
		data: [
		  { value: 32.0, name: '纯电动客车' },
		  { value: 30.3, name: '柴油车' },
		  { value: 18, name: '天然气车' },
		  { value: 17.8, name: '混合动力车' },
		  { value: 1, name: '双燃料车' },
		  { value: 0.6, name: '汽油车' },
		  { value: 0.2, name: '无轨电车' },
		  { value: 0.2, name: '其他' }
		],
		emphasis: {
		  itemStyle: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 0.5)'
		  }
		}
	  }
	];
	buidEcharts.initPie(document.querySelector(".line2 .chart"),
	series,
	legend);
	
	
	var datas = createData();
	legend = null;
	xAxis=[
	  {
		type: 'category',
		boundaryGap: false,
		data: datas.xData,
		axisPointer: {
		  type: 'shadow'
		},
		axisPointer: {
			type: 'shadow'
		  },
		  axisLabel:{
			  color:"rgba(255,255,255,.6)",
			  fontSize: '12'
		  },
		  axisLine:{
			  show: false
		  }
	  }
	];
	yAxis=[
	   {
		type: 'value',
		name: '客流量',
		axisLabel:{
			color:"rgba(255,255,255,.6)",
			fontSize: '12'
		},
		axisLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		},
		splitLine:{
			lineStyle:{
				color:"rgba(255,255,255,.1)",
			}
		}
	  }
	];
	series=[
	  {
		name: '客流量',
		type: 'line',
		symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
		showAllSymbol: true,
		symbolSize: 0,
		smooth: true,
		itemStyle:{
			normal:{
				barBorderRadius: 5,
				color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 1,color: '#33cabb'},{offset: 0,color: '#3EACE5'}])
				// color:"#2f89cf",
			},
		},
		areaStyle: {},
		data: datas.yData
	  }
	];
	var title = {
		show:true,
		top:"5%",
		left:'45%',
		text:"近30天客流量数据",
		textStyle:{
			color:"#fff"
		}
	}
	buidEcharts.initBarOrLine(document.getElementById("line7"),
	series,
	legend,
	xAxis,
	yAxis,
	title
	);
	
	//加载数据
	var vehicleRates = [["杭州","96%","94%","89%","13%"],
						["宁波","87%","87%","77%","4.89%"],
						["温州","85%","86%","72%","3.74%"],
						["绍兴","81%","82%","72%","4.20%"],
						["金华","80%","81%","74%","4.20%"],
						["台州","80%","81%","78%","9.62%"],
						["丽水","79%","80%","78%","9.62%"],
						["嘉兴","78%","74%","78%","5.62%"],
						["衢州","82%","71%","78%","4.92%"]
						];
	buidEcharts.initLoadData($("#vehiclerate tbody"),vehicleRates);
	$("#keyunl").trigger("click");
	$("#kyl").trigger("click");
});

function createData() {
	//30天
	var d = new Date();
	var todayTime = d.getTime();
	var xData = [];
	var yData = [];
	var kl = 4321;
	for(var i=0;i<30;i++) {
		todayTime = todayTime-24*60*60*1000;
		d.setTime(todayTime);
		var year = d.getFullYear();
		var month = d.getMonth() + 1;
		var day = d.getDate();
		var w = d.getDay();
		xData.push(year + "-" + getDoubleNum(month) + "-" + getDoubleNum(day));
		
		if(w == 0 || w == 6) {
			yData.push(kl - 389*(w + 1));
		}else {
			yData.push(kl + 250*(w+1));
		}
	}
	
	xData.sort();
	yData.reverse();
	
	//数据
	return {
		xData:xData,
		yData:yData
	}
}
